<template>
  <view class="merchant-list">
    <u-navbar :is-back="true" title="爱心商户" :border-bottom="false"></u-navbar>
    <!-- 搜索栏 -->
    <view class="search-bar">
      <u-search 
        placeholder="搜索爱心商户" 
        v-model="searchText"
        :show-action="true"
        action-text="搜索"
        @search="handleSearch"
        @custom="handleSearch"
        :input-style="{ width: '80%', margin: '0 auto' }"
      />
    </view>
    
    <!-- 商户列表 -->
    <view class="merchant-container">
      <view 
        class="merchant-item" 
        v-for="merchant in filteredMerchants" 
        :key="merchant.id"
        @click="showMerchantPopup(merchant)"
      >
        <view class="merchant-info">
          <text class="merchant-name">{{ merchant.name }}</text>
          <text class="merchant-distance">{{ merchant.distance }}km</text>
          <view class="merchant-tags">
            <text 
              v-for="tag in merchant.tags" 
              :key="tag" 
              class="tag"
            >{{ tag }}</text>
          </view>
          <text class="merchant-discount">{{ merchant.discount }}</text>
        </view>
        <image :src="merchant.image" class="merchant-image" />
      </view>
    </view>
    
    <!-- 商户详情弹窗 -->
    <u-popup 
      ref="merchantPopup" 
      mode="bottom" 
      :closeable="true"
      :round="20"
      height="80%"
    >
      <view class="popup-content" v-if="currentMerchant">
        <!-- 顶部Banner图 -->
        <u-image 
          :src="currentMerchant.banner" 
          width="100%" 
          height="300rpx" 
          radius="10"
          mode="aspectFill"
        />
        
        <!-- 商家信息卡片 -->
        <view class="merchant-card">
          <view class="info-item">
            <u-icon name="phone" size="20" color="#333"></u-icon>
            <text class="info-text">{{ currentMerchant.phone }}</text>
          </view>
          <view class="info-item">
            <u-icon name="map" size="20" color="#333"></u-icon>
            <text class="info-text">{{ currentMerchant.address }}</text>
          </view>
        </view>
        
        <!-- 商品列表 -->
        <view class="product-list">
          <view 
            class="product-item" 
            v-for="product in currentMerchant.products" 
            :key="product.id"
          >
            <image :src="product.image" class="product-image" />
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="product-specs">
                <text class="product-price">¥{{ product.price }}</text>
                <text class="product-spec">{{ product.spec }}</text>
              </view>
              <text class="product-desc">{{ product.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import uSearch from '@/uview-ui/components/u-search/u-search.vue';
import uPopup from '@/uview-ui/components/u-popup/u-popup.vue';
import uButton from '@/uview-ui/components/u-button/u-button.vue';
import uImage from '@/uview-ui/components/u-image/u-image.vue';

export default {
  components: { uSearch, uPopup, uButton, uImage },
  data() {
    return {
      searchText: '',
      currentMerchant: null,
      merchants: [
        {
          id: 1,
          name: '爱心餐厅',
          image: '/static/merchant1.jpg',
          banner: '/static/banner1.jpg',
          tags: ['公益', '环保'],
          distance: 1.2,
          discount: '满50减10',
          description: '长期资助贫困学生',
          phone: '13800138000',
          address: '北京市朝阳区某某路123号',
          products: [
            {
              id: 1,
              name: '招牌套餐',
              image: '/static/product1.jpg',
              price: 50,
              spec: '1份套餐',
              description: '包含主菜、配菜和饮料'
            },
            {
              id: 2,
              name: '儿童套餐',
              image: '/static/product2.jpg',
              price: 30,
              spec: '1份套餐',
              description: '适合小朋友的营养餐'
            }
          ]
        },
        {
          id: 2,
          name: '公益超市',
          image: '/static/merchant2.jpg',
          banner: '/static/banner2.jpg',
          tags: ['扶贫', '有机'],
          distance: 0.8,
          discount: '满100减20',
          description: '收益用于山区建设',
          products: [
            {
              id: 1,
              name: '有机蔬菜',
              image: '/static/product3.jpg',
              price: 20,
              spec: '500g',
              description: '新鲜无农药'
            },
            {
              id: 2,
              name: '手工面包',
              image: '/static/product4.jpg',
              price: 15,
              spec: '1个',
              description: '纯手工制作'
            }
          ]
        }
      ]
    };
  },
  computed: {
    filteredMerchants() {
      return this.merchants.filter(merchant => 
        merchant.name.includes(this.searchText)
      );
    }
  },
  methods: {
    handleSearch() {
      // 搜索逻辑已通过v-model自动处理
    },
    showMerchantPopup(merchant) {
      this.currentMerchant = merchant;
      this.$refs.merchantPopup.open();
    },
    navigateToDetail(id) {
      this.$refs.merchantPopup.close();
      uni.navigateTo({
        url: `/pages/merchantDetail/merchantDetail?id=${id}`
      });
    }
  }
};
</script>

<style scoped>
.merchant-list {
  padding: 20rpx;
  background-color: #f8f8f8;
}
.search-bar {
  margin-bottom: 20rpx;
}
.merchant-container {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.merchant-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.merchant-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}
.merchant-info {
  flex: 1;
  margin-right: 20rpx;
}
.merchant-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.merchant-distance {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}
.merchant-tags {
  margin: 10rpx 0;
}
.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background-color: #f0f9eb;
  color: #67c23a;
  font-size: 22rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
}
.merchant-discount {
  font-size: 24rpx;
  color: #ff4d4f;
}
.popup-content {
  padding: 0;
}
.merchant-card {
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.info-text {
  margin-left: 10rpx;
  font-size: 26rpx;
  color: #333;
}
.product-list {
  padding: 20rpx;
}
.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.product-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.product-specs {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}
.product-price {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-right: 20rpx;
}
.product-spec {
  font-size: 24rpx;
  color: #666;
}
.product-desc {
  font-size: 24rpx;
  color: #666;
}
</style>